import React from 'react';
import {
  Button,
  Badge,
  Card,
  FeatureCard,
  PricingCard,
  StatCard,
  Divider,
  SVGDivider,
  DisplayLarge,
  Heading1,
  Heading2,
  Heading3,
  BodyLarge,
  BodyMedium,
  BodySmall,
  LabelSmall,
  LabelTiny,
  GradientText,
  Section,
  Container,
  SectionHeader,
} from '../components';

/**
 * Design System Showcase
 * Demonstrates all components and patterns from the Skene.ai design system
 */
export function DesignSystemShowcase() {
  return (
    <div className="bg-[#060606] min-h-screen">
      {/* Typography Showcase */}
      <Section background="dark" padding="large">
        <Container variant="narrow">
          <div className="space-y-8">
            <Heading1 className="text-[#ebdccf]">Typography System</Heading1>
            
            <div className="space-y-6">
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Display Large</LabelTiny>
                <DisplayLarge className="text-[#ebdccf]">96px Hero</DisplayLarge>
              </div>
              
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Gradient Text</LabelTiny>
                <DisplayLarge>
                  <GradientText variant="warm">5m</GradientText>
                </DisplayLarge>
              </div>
              
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Heading 1</LabelTiny>
                <Heading1 className="text-[#ebdccf]">48px Section Title</Heading1>
              </div>
              
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Heading 2</LabelTiny>
                <Heading2 className="text-[#ebdccf]">36px Subsection</Heading2>
              </div>
              
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Heading 3</LabelTiny>
                <Heading3 className="text-[#ebdccf]">20px Card Title</Heading3>
              </div>
              
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Body Text</LabelTiny>
                <BodyLarge className="text-[#a1a1a1]">18px body text for descriptions</BodyLarge>
                <BodyMedium className="text-[#a1a1a1]">16px body text for content</BodyMedium>
                <BodySmall className="text-[#a1a1a1]">14px body text for small content</BodySmall>
              </div>
              
              <div>
                <LabelTiny className="text-[#a1a1a1] mb-2">Labels</LabelTiny>
                <div className="space-y-2">
                  <div><LabelSmall className="text-[#edc29c]">12px uppercase label</LabelSmall></div>
                  <div><LabelTiny className="text-[#ebdccf]">11px uppercase tiny</LabelTiny></div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Divider variant="light" />

      {/* Button Showcase */}
      <Section background="dark" padding="large">
        <Container variant="narrow">
          <Heading1 className="text-[#ebdccf] mb-12">Buttons</Heading1>
          
          <div className="space-y-8">
            <div>
              <LabelTiny className="text-[#a1a1a1] mb-4">Primary Buttons</LabelTiny>
              <div className="flex gap-4 flex-wrap">
                <Button variant="primary" size="sm">Sign up</Button>
                <Button variant="primary" size="md">Get Started</Button>
                <Button variant="primary" size="lg">Join Waitlist →</Button>
              </div>
            </div>
            
            <div>
              <LabelTiny className="text-[#a1a1a1] mb-4">Secondary Buttons</LabelTiny>
              <div className="flex gap-4 flex-wrap">
                <Button variant="secondary" size="sm">Learn More</Button>
                <Button variant="secondary" size="md">View Details</Button>
                <Button variant="secondary" size="lg">Contact Sales →</Button>
              </div>
            </div>
            
            <div>
              <LabelTiny className="text-[#a1a1a1] mb-4">Ghost Buttons (Light)</LabelTiny>
              <div className="flex gap-4 flex-wrap">
                <Button variant="ghost-light" size="sm">Cancel</Button>
                <Button variant="ghost-light" size="md">Try for free</Button>
                <Button variant="ghost-light" size="lg">Get Started →</Button>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Divider variant="light" />

      {/* Badge Showcase */}
      <Section background="dark" padding="large">
        <Container variant="narrow">
          <Heading1 className="text-[#ebdccf] mb-12">Badges</Heading1>
          
          <div className="flex gap-4 flex-wrap">
            <Badge variant="dark">Success analytics</Badge>
            <Badge variant="outlined">SKENE.AI</Badge>
            <Badge variant="accent">PRICING</Badge>
            <Badge variant="light">Getting started</Badge>
          </div>
        </Container>
      </Section>

      <Divider variant="light" />

      {/* Card Showcase */}
      <Section background="light" padding="large">
        <Container>
          <Heading1 className="text-[#2c2c2c] mb-12">Cards</Heading1>
          
          <div className="space-y-12">
            <div>
              <LabelTiny className="text-[#757171] mb-6">Feature Cards</LabelTiny>
              <div className="flex gap-[18px] flex-wrap">
                <FeatureCard
                  badge="Success analytics"
                  description="Real-time visibility into what's working. Track completion rates, identify drop-off points, and measure time-to-activation."
                />
                <FeatureCard
                  badge="Lifecycle automation"
                  description="Automated customer journey management from first login to renewal. AI agents handle health scoring, engagement triggers, and proactive outreach at scale."
                />
              </div>
            </div>
            
            <div>
              <LabelTiny className="text-[#757171] mb-6">Glassmorphic Cards</LabelTiny>
              <div className="flex gap-4 flex-wrap">
                <Card variant="glassmorphic-dark" className="p-[40px] w-[300px]">
                  <Heading3 className="text-[#2c2c2c] mb-4">Dark Glass</Heading3>
                  <BodyMedium className="text-[#757171]">
                    Glassmorphic card with dark background tint
                  </BodyMedium>
                </Card>
                
                <Card variant="solid-light" className="p-[40px] w-[300px]">
                  <Heading3 className="text-[#2c2c2c] mb-4">Solid Light</Heading3>
                  <BodyMedium className="text-[#757171]">
                    Solid light background card
                  </BodyMedium>
                </Card>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Divider variant="dark" />

      {/* Stat Card Showcase */}
      <Section background="dark" padding="large">
        <Container>
          <Heading1 className="text-[#ebdccf] mb-12">Stat Cards</Heading1>
          
          <div className="flex gap-[18px] justify-center flex-wrap">
            <StatCard value="5m" label="Average setup time" />
            <StatCard value="95%" label="Customer satisfaction" />
            <StatCard value="3x" label="Increase in completion rate" />
          </div>
        </Container>
      </Section>

      <Divider variant="light" />

      {/* Pricing Card Showcase */}
      <Section background="dark" padding="large">
        <Container>
          <Heading1 className="text-[#ebdccf] mb-12">Pricing Cards</Heading1>
          
          <div className="flex gap-6 justify-center flex-wrap">
            <PricingCard
              plan="Free plan"
              price="0€/month"
              badge="getting started"
              features={[
                '1 live site',
                'Up to 5 monthly onboardings',
                'Basic analytics'
              ]}
              buttonText="Try for free →"
              variant="dark"
            />
            
            <PricingCard
              plan="Growth plan"
              price="10€/site"
              badge="Scale with bundles"
              features={[
                'Unlimited sites',
                'Bundle pricing (e.g., 70 for €50)',
                'Advanced analytics'
              ]}
              buttonText="Try for free →"
              variant="light"
              isPopular={true}
            />
          </div>
        </Container>
      </Section>

      <Divider variant="light" />

      {/* Section Header Showcase */}
      <Section background="light" padding="large">
        <Container variant="narrow">
          <SectionHeader
            badge="Product-led growth"
            badgeVariant="outlined"
            title="More than just onboarding"
            subtitle="Everything you need to reach PLG, without the overhead."
            align="center"
            className="text-[#2c2c2c]"
          />
        </Container>
      </Section>

      <Divider variant="dark" />

      {/* Divider Showcase */}
      <Section background="dark" padding="large">
        <Container variant="narrow">
          <Heading1 className="text-[#ebdccf] mb-12">Dividers</Heading1>
          
          <div className="space-y-8">
            <div>
              <LabelTiny className="text-[#a1a1a1] mb-4">Light Divider</LabelTiny>
              <Divider variant="light" />
            </div>
            
            <div>
              <LabelTiny className="text-[#a1a1a1] mb-4">Subtle Divider</LabelTiny>
              <Divider variant="subtle" />
            </div>
            
            <div>
              <LabelTiny className="text-[#a1a1a1] mb-4">SVG Divider</LabelTiny>
              <SVGDivider variant="subtle" />
            </div>
          </div>
        </Container>
      </Section>

      {/* Color Palette Showcase */}
      <Section background="dark" padding="large">
        <Container>
          <Heading1 className="text-[#ebdccf] mb-12">Color Palette</Heading1>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
              <div className="h-24 bg-[#060606] border border-[#353535] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Primary BG</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#060606</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#2c2c2c] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Secondary BG</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#2c2c2c</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#faf1e9] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Light Surface</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#faf1e9</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#edc29c] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Accent</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#edc29c</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#ebdccf] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Text Light</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#ebdccf</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#a1a1a1] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Text Muted</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#a1a1a1</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#f5b276] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Accent Secondary</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#f5b276</BodySmall>
            </div>
            
            <div>
              <div className="h-24 bg-[#e8c260] rounded-lg mb-2" />
              <LabelSmall className="text-[#a1a1a1]">Accent Tertiary</LabelSmall>
              <BodySmall className="text-[#6a6a6a]">#e8c260</BodySmall>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}